<template>
	<section class="hot_area">
<!--****************************************************************************-->
		<div class="first_p" v-show="activeP ==='first'">
			<!--<p class="title">入住区域热力图</p>-->
		<div class="">
			<!-- <p class="title">入住区域热力图</p> -->
			<div class="width1000">
				<form-plane @changeImg="changeImg" :checkBox="checkBox"></form-plane>
				<span class="detail_data" @click="changeP('third')">详细数据</span>
			</div>
			<!--<area-img :chooseImg="chooseImg"></area-img>-->
			<div class="area_img1" v-show="chooseImg==='tianhe'">

			</div>
			<div class="area_img2" v-show="chooseImg==='huangpu'">

			</div>
		</div>
		</div>

<!--****************************************************************************-->
		<div class="second_p" v-show="activeP ==='second'">
			<p class="title" style="font-size: 21px;">{{city}}城市入住区域信息统计与明细表</p>
			<div class="width1000" style="border-bottom:solid 1px #48576c;padding-bottom: 60px">
				<form-plane :checkBox="checkBoxDetailData"></form-plane>
			</div>
			<div class="width1000" style="margin-top: 45px;">
				<img class="back" src="../../assets/back.png" @click="changeP('first')" />
				<span class="daochu_shuju">导出数据</span>
				<el-tabs v-model="activeName2" type="card" >
				    <el-tab-pane label="图形化分析" name="first">

				    </el-tab-pane>
				    <el-tab-pane label="详细信息" name="second">
				    	<table-plane :tableLabel="tableLabel"  :tableData="tableData"></table-plane>
				    </el-tab-pane>
				</el-tabs>
			</div>
		</div>
<!--****************************************************************************-->
		<div class="third_p" v-show="activeP ==='third'">
			<img src="../../assets/areaView.png" width="100%"/>
		</div>
		</div>
	</section>
</template>

<script>
	import formPlane from '@/components/form'
	import areaImg from '@/components/areaImg'
	import tablePlane from '@/components/table'
	export default{
		components:{
			areaImg,
			formPlane,
			tablePlane
		},
		data(){
			return{
				menu:[],
				activeName2: 'second',
				chooseImg:'tianhe',
				activeP:'first',
				city:'xx',
				form:{
					type:[],
					resource:'',
				},
				checkBox:[
						{
							name:'区域',
							type:'radio',
							checkBox:[
								{
									name:'全市',
									val:'quanshi'
								},
								{
									name:'天河区',
									val:'tianhe'
								},
								{
									name:'黄埔区',
									val:'huangpu'
								},
								{
									name:'越秀区',
									val:'yuexiu'
								},
								{
									name:'海珠区',
									val:'haizhu'
								},
								{
									name:'荔湾区',
									val:'liwan'
								}
							],
						},
						{
							name:'入住时间段',
							type:'radio',
							checkBox:[
								{
									name:'全部',
									val:'all'
								},
								{
									name:'上午',
									val:'shangwu'
								},
								{
									name:'下午',
									val:'xiawu'
								},
								{
									name:'晚上',
									val:'wanshang'
								},
								{
									name:'凌晨',
									val:'lincheng'
								},

							]
						},
						{
							name:'住宿分类',
							type:'radio',
							checkBox:[
								{
									name:'全部',
									val:'all',
								},
								{
									name:'酒店',
									val:'jiudian',
								},
								{
									name:'宾馆',
									val:'bingguan',
								},
								{
									name:'旅店',
									val:'lvdian',
								},
								{
									name:'民宿',
									val:'minsu',
								},
								{
									name:'招待所',
									val:'zhandai',
								}
							],
						},
						{
							name:'',
							type:'radio',
							checkBox:['今日','本周','本月','本季度','今年'],
							checkBox:[
									{
										name:'今日',
										val:'totay',
									},
									{
										name:'本周',
										val:'week',
									},
									{
										name:'本月',
										val:'month',
									},
									{
										name:'本季度',
										val:'eq',
									},
									{
										name:'今年',
										val:'year',
									}

							],
						}
				],
				checkBoxDetailData:[
						{
							name:'',
							type:'radio',
							checkBox:[
								{
									name:'今日',
									val:'quanshi'
								},
								{
									name:'本周',
									val:'tianhe'
								},
								{
									name:'本月',
									val:'huangpu'
								},
								{
									name:'本季度',
									val:'yuexiu'
								},
								{
									name:'今年',
									val:'haizhu'
								},
							],
						},
				],
				tableData:[
						{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							xiawu:'25%',
						},
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							xiawu:'25%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							xiawu:'25%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							xiawu:'25%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							wanshang:'53%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							shangwu:'22%',
							wanshang:'53%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							lincheng:'15%',
							xiawu:'25%',
							wanshang:'53%',
						},
					},
							{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						stateDiy21:{
							lincheng:'15',
							shangwu:'22',
							xiawu:'25',
							wanshang:'53',
						},
						stateDiy22:{
							xitong:'20',
							minjing:'15',
						},
						stateDiy23:{
							shangwu:'22%',
							xiawu:'25%',
							wanshang:'53%',
						},
					},

				],
				tableLabel:{
					checkInTime:{name:'入住酒店/旅馆/民宿',type:0},
					name:{name:'分类',type:0},
					shengFZ:{name:'地址',type:0},
					sex:{name:'所在区域',type:0},
					type:{name:'街道',type:0},
					state:{
						name:'时间段',
						type:1,
						title:['凌晨','上午','下午','晚上']
					},
					state2:{
						name:'入住人数',
						type:1,
						title:['本地','外地']
					},
					state3:{
						name:'变化情况',
						type:1,
						title:['日同比','周环比','月环比']
					},
				},
			}
		},

		methods:{
			checkBox1(val){
				this.chooseImg = val;
			},
			changeP(val){/*换页*/
				this.activeP = val;
			},
			changeImg(val){
				console.log(val);
				this.chooseImg = val;

			}
		},
		mounted(){
			this.$store.commit('menuActive',this.$router.history.current.name);
		},
		watch:{
			activeP(newVal){/*顶部的导航栏*/
				if(newVal==='second'){
					this.$store.commit('isShowMenu',false);
				}else{
					this.$store.commit('isShowMenu',true);
				}
			}
		}
	}
</script>

<style>
	.hot_area .title{
		text-align: center;
		color: #59d1fd;
		font-size: 28px;
		margin: 30px 0;
		margin: 10px 0;
	}
	.hot_area .el-form-item__label{
			color: #59d1fd;
			font-size: 18px;
	}
	.hot_area .el-checkbox__inner{
		background: #4d5d72;
	}
	.hot_area .el-radio__inner{
		background: #4d5d72;
	}
	.hot_area .el-checkbox,.hot_area .el-radio{
		color: #fff;
	}
	.hot_area .el-radio+.el-radio{
		margin-left: 15px;
	}
	.hot_area .el-form-item{
		float: left;
		width: 50%;
	}
	.hot_area .el-radio__input.is-checked .el-radio__inner{
		border-color:unset;
		background:unset;
	}
	.hot_area .el-radio__inner::after{
		background: #5AD0F8;
		    width: 6px;
    	height: 6px;
	}
	.hot_area .width1000{
		width: 1100px;
		margin: 40px auto 15px auto;
		position: relative;
	}
	.hot_area .detail_data {
		    position: absolute;
		    right: 110px;
		    top: 56px;
		    color: #59d1fd;
		    font-size: 13px;
		    cursor: pointer;
	}
	/*****************************************************************/
	.hot_area .back {
	    width: 32px;
	    vertical-align: middle;
	    margin-left: 30px;
	    margin-right: 35px;
	    cursor: pointer;
	}
	.hot_area .daochu_shuju {
	    font-size: 16px;
	    color: #5ad0fb;
	    vertical-align: middle;
	}
	.hot_area .el-tabs__item.is-active {
	    color: #fff;
	    background: #3789af;
	}

	.hot_area .el-tabs__item {
   		color: #55c9f4;
	}

	.hot_area .el-tabs__header{
		margin: 25px 0px 15px;
	}
	.area_img1{
		position: absolute;
	    width: 100%;
	    height: calc(100% - 210px);
	    background: url(../../assets/baiyun.png);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    -moz-background-size: 100% 100%;
	    top: 210px;
    	 left: 0;
	    /* z-index: 20000; */
	}
	.area_img2{
		position: absolute;
	    width: 100%;
	    height: calc(100% - 234px);
	    background: url(../../assets/huangpu2.png);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    -moz-background-size: 100% 100%;
	    top: 234px;
    	left: 0;
	}
</style>
